﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="8.aspx.cs" Inherits="BaseWeb.拖拽研究._7" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>拖动吸附</title>
    <%--
        还可以在拖动的时候吸附到其他元素或网格。
        使用snap参数指定要吸附到的元素，使用grid参数指定吸附到网格，
        如下： 
    --%>
    <style>
        .draggable
        {
            background-color: green;
            width: 90px;
            height: 80px;
            padding: 5px;
            float: left;
            margin: 0 10px 10px 0;
            font-size: .9em;
        }
    </style>

    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>

    <script src="../../js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

    <script>
        $(function()
        {
            $("#draggable1").draggable({ snap: true });
            $("#draggable2").draggable({ snap: "#container" });
            $("#draggable3").draggable({ grid: [30, 30] });
        });</script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="container" style="background-color: gray; height: 300">
        <div id="draggable1" class="draggable">
            <p>
                吸附到其他可拖拽元素</p>
        </div>
        <div id="draggable2" class="draggable">
            <p>
                吸附到容器</p>
        </div>
        <div id="draggable3" class="draggable">
            <p>
                吸附到网格(30x30)</p>
        </div>
    </div>
    <!--container-->
    </form>
</body>
</html>
